<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/onediv/pen/WNOdMWw</title>

    <link rel="stylesheet" href="./style.css">

</head>

<body>
<main>
    <nav class="main-menu">
        <h1>Fitness App</h1>
        <img class="logo" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4cfdcb5a-0137-4457-8be1-6e7bd1f29ebb" alt="" />
        <ul>
            <li class="nav-item active">
                <b></b>
                <b></b>
                <a href="#">
                    <i class="fa fa-house nav-icon"></i>
                    <span class="nav-text">Home</span>
                </a>
            </li>

            <li class="nav-item">
                <b></b>
                <b></b>
                <a href="#">
                    <i class="fa fa-user nav-icon"></i>
                    <span class="nav-text">Profile</span>
                </a>
            </li>

            <li class="nav-item">
                <b></b>
                <b></b>
                <a href="#">
                    <i class="fa fa-calendar-check nav-icon"></i>
                    <span class="nav-text">Schedule</span>
                </a>
            </li>

            <li class="nav-item">
                <b></b>
                <b></b>
                <a href="#">
                    <i class="fa fa-person-running nav-icon"></i>
                    <span class="nav-text">Activities</span>
                </a>
            </li>

            <li class="nav-item">
                <b></b>
                <b></b>
                <a href="#">
                    <i class="fa fa-sliders nav-icon"></i>
                    <span class="nav-text">Settings</span>
                </a>
            </li>
        </ul>
    </nav>

    <section class="content">
        <div class="left-content">
            <div class="activities">
                <h1>Popular Activities</h1>
                <div class="activity-container">
                    <div class="image-container img-one">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/467cf682-03fb-4fae-b129-5d4f5db304dd" alt="tennis" />
                        <div class="overlay">
                            <h3>Tennis</h3>
                        </div>
                    </div>

                    <div class="image-container img-two">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3bab6a71-c842-4a50-9fed-b4ce650cb478" alt="hiking" />
                        <div class="overlay">
                            <h3>Hiking</h3>
                        </div>
                    </div>

                    <div class="image-container img-three">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c8e88356-8df5-4ac5-9e1f-5b9e99685021" alt="running" />
                        <div class="overlay">
                            <h3>Running</h3>
                        </div>
                    </div>

                    <div class="image-container img-four">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/69437d08-f203-4905-8cf5-05411cc28c19" alt="cycling" />
                        <div class="overlay">
                            <h3>Cycling</h3>
                        </div>
                    </div>

                    <div class="image-container img-five">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e1a66078-1927-4828-b793-15c403d06411" alt="yoga" />
                        <div class="overlay">
                            <h3>Yoga</h3>
                        </div>
                    </div>

                    <div class="image-container img-six">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7568e0ff-edb5-43dd-bff5-aed405fc32d9" alt="swimming" />
                        <div class="overlay">
                            <h3>Swimming</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="left-bottom">
                <div class="weekly-schedule">
                    <h1>Weekly Schedule</h1>
                    <div class="calendar">
                        <div class="day-and-activity activity-one">
                            <div class="day">
                                <h1>13</h1>
                                <p>mon</p>
                            </div>
                            <div class="activity">
                                <h2>Swimming</h2>
                                <div class="participants">
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 1" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de" style="--i: 2" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" style="--i: 3" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68" style="--i: 4" alt="" />
                                </div>
                            </div>
                            <button class="btn">Join</button>
                        </div>

                        <div class="day-and-activity activity-two">
                            <div class="day">
                                <h1>15</h1>
                                <p>wed</p>
                            </div>
                            <div class="activity">
                                <h2>Yoga</h2>
                                <div class="participants">
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 1" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 2" alt="" />
                                </div>
                            </div>
                            <button class="btn">Join</button>
                        </div>

                        <div class="day-and-activity activity-three">
                            <div class="day">
                                <h1>17</h1>
                                <p>fri</p>
                            </div>
                            <div class="activity">
                                <h2>Tennis</h2>
                                <div class="participants">
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 1" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68" style="--i: 2" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 3" alt="" />
                                </div>
                            </div>
                            <button class="btn">Join</button>
                        </div>

                        <div class="day-and-activity activity-four">
                            <div class="day">
                                <h1>18</h1>
                                <p>sat</p>
                            </div>
                            <div class="activity">
                                <h2>Hiking</h2>
                                <div class="participants">
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" style="--i: 1" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 2" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 4" alt="" />
                                    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de" style="--i: 5" alt="" />
                                </div>
                            </div>
                            <button class="btn">Join</button>
                        </div>
                    </div>
                </div>

                <div class="personal-bests">
                    <h1>Personal Bests</h1>
                    <div class="personal-bests-container">
                        <div class="best-item box-one">
                            <p>Fastest 5K Run: 22min</p>
                            <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/242bbd8c-aaf8-4aee-a3e4-e0df62d1ab27" alt="" />
                        </div>
                        <div class="best-item box-two">
                            <p>Longest Distance Cycling: 4 miles</p>
                            <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a3b3cb3a-5127-498b-91cc-a1d39499164a" alt="" />
                        </div>
                        <div class="best-item box-three">
                            <p>Longest Roller-Skating: 2 hours</p>
                            <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e0ee8ffb-faa8-462a-b44d-0a18c1d9604c" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right-content">
            <div class="user-info">
                <div class="icon-container">
                    <i class="fa fa-bell nav-icon"></i>
                    <i class="fa fa-message nav-icon"></i>
                </div>
                <h4>Kelsey Miller</h4>
                <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/40b7cce2-c289-4954-9be0-938479832a9c" alt="user" />
            </div>

            <div class="active-calories">
                <h1 style="align-self: flex-start">Active Calories</h1>
                <div class="active-calories-container">
                    <div class="box" style="--i: 85%">
                        <div class="circle">
                            <h2>85<small>%</small></h2>
                        </div>
                    </div>
                    <div class="calories-content">
                        <p><span>Today:</span> 400</p>
                        <p><span>This Week:</span> 3500</p>
                        <p><span>This Month:</span> 14000</p>
                    </div>
                </div>
            </div>

            <div class="mobile-personal-bests">
                <h1>Personal Bests</h1>
                <div class="personal-bests-container">
                    <div class="best-item box-one">
                        <p>Fastest 5K Run: 22min</p>
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/05dfc444-9ed3-44cc-96af-a9cf195f5820" alt="" />
                    </div>
                    <div class="best-item box-two">
                        <p>Longest Distance Cycling: 4 miles</p>
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9ca170e9-1252-4fa6-8677-36493540c1f2" alt="" />
                    </div>
                    <div class="best-item box-three">
                        <p>Longest Roller-Skating: 2 hours</p>
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/262d1611-ed4c-4297-981c-480cf7f95714" alt="" />
                    </div>
                </div>
            </div>

            <div class="friends-activity">
                <h1>Friends Activity</h1>
                <div class="card-container">
                    <div class="card">
                        <div class="card-user-info">
                            <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9290037d-a5b2-4f50-aea3-9f3f2b53b441" alt="" />
                            <h2>Jane</h2>
                        </div>
                        <img class="card-img" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/bef54506-ea45-4e42-a1b6-23a48f61c5e8" alt="" />
                        <p>We completed the 30-Day Running Streak Challenge!🏃‍♀️🎉</p>
                    </div>

                    <div class="card card-two">
                        <div class="card-user-info">
                            <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/42616ef2-ba96-49c7-80ea-c3cf1e2ecc89" alt="" />
                            <h2>Mike</h2>
                        </div>
                        <img class="card-img" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2dcc1b94-06c5-4c62-b886-53b9e433fd44" alt="" />
                        <p>I just set a new record in cycling: 30 miles!💪</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
</body>
<script src="script.js" type="module"></script>
</html>